import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { fetchH168Top10, fetchH24Top10, fetchH72Top10 } from "../../api";

export const fetchAllHotFeedsAction = createAsyncThunk(
  'hotfeeds/fetchAll',
  () => {
    return Promise.all([
      fetchH24Top10(),
      fetchH72Top10(),
      fetchH168Top10()
    ])
  }
)

export const hotfeedsSlice = createSlice({
  name: 'hotfeeds',
  initialState: {
    current: 0,
    loading: false,
    lists: [[], [],[]]
  },
  reducers: {
    select(state, {payload}) {
      state.current = payload
    }
  },
  extraReducers: {
    [fetchAllHotFeedsAction.pending](state) {
      state.loading = true
    },
    [fetchAllHotFeedsAction.fulfilled](state, {payload}) {
      payload.forEach(
        ({feeds}, index) =>
          state.lists[index] = feeds
      )
    }
  }
})
export const hotFeedsReducer = hotfeedsSlice.reducer
export const { select } = hotfeedsSlice.actions